<script setup lang="ts">
import { SunIcon, MoonIcon } from "@heroicons/vue/24/outline";
import { computed } from "vue";

// 使用Nuxt自带的useColorMode，不要从VueUse导入
const colorMode = useColorMode();

// 简化切换逻辑
function toggleColorMode() {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
}
</script>

<template>
  <button
    @click="toggleColorMode"
    class="px-2 sm:px-3 cursor-pointer py-2 rounded-md text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-300 transition-all flex items-center text-sm sm:text-base font-medium"
    aria-label="Toggle theme"
  >
    <div class="flex items-center">
      <SunIcon
        v-if="colorMode.value === 'dark'"
        class="w-4 h-4 sm:w-5 sm:h-5 mr-1.5 sm:mr-2"
      />
      <MoonIcon v-else class="w-4 h-4 sm:w-5 sm:h-5 mr-1.5 sm:mr-2" />
      <span class="text-sm sm:text-base">
        {{ colorMode.value === "dark" ? "切换亮色" : "切换暗色" }}
      </span>
    </div>
  </button>
</template>

<style scoped>
button {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}

button::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: theme("colors.primary.light");
  transition: width 0.3s ease;
}

button:hover::after {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 640px) {
  button {
    padding: 0.5rem 0.75rem;
  }

  button::after {
    bottom: -1px;
    height: 1px;
  }
}

/* 确保图标和文字垂直对齐 */
button .flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

/* 优化深色模式下的悬停效果 */
.dark button:hover {
  background-color: theme("colors.gray.700");
}

/* 确保文字颜色与图标一致 */
button span {
  color: inherit;
  font-weight: inherit;
}
</style>
